<template>
  <div>
    <el-form
      :model="form"
      label-width="120px"
      size="mini"
    >
      <template v-for="(item,index) in $formConfig">
        <el-form-item
          :label="item.label"
          :key="index"
        >
          <!-- span -->
          <template v-if="item.type === 'span'">
            <span style="word-break: break-all;">
              {{item.value}}
            </span>
          </template>
          <!-- 数字，密码，多行文本 -->
          <template v-if="item.type === 'text' || item.type === 'password' || item.type === 'textarea'">
            <el-input
              :type="item.type"
              :placeholder="item.placeholder || '请输入' + item.label"
              v-model="form[item.key]"
              clearable
              :disabled="item.disabled"
              :style="{width: item.type === 'textarea'?'96%':'200px'}"
            >
            </el-input>
          </template>
          <!-- 数字 -->
          <template v-if="item.type === 'number'">

            <el-input-number
              v-model="form[item.key]"
              :disabled="item.disabled"
              :placeholder="item.placeholder || '请输入' + item.label"
              controls-position="right"
            ></el-input-number>
          </template>
          <!-- select -->
          <template v-if="item.type === 'select'">
            <el-select
              v-model="form[item.key]"
              filterable
              clearable
              :disabled="item.disabled"
              :placeholder="'请选择' + item.label"
              style="width:200px"
            >
              <el-option
                v-for="$item in item.list.data"
                :key="$item[item.list['valueKey']]"
                :label="$item[item.list['labelKey']]"
                :value="$item[item.list['valueKey']]"
              ></el-option>
            </el-select>
          </template>

          <!-- radio-group 类型 -->
          <template v-else-if="item.type === 'radio-group'">
            <el-radio-group
              v-model="form[item.key]"
              :disabled="item.disabled"
            >
              <el-radio
                v-for="$item in item.list.data"
                :key="$item[item.list['valueKey']]"
                :label="$item[item.list['valueKey']]"
              >{{$item[item.list['labelKey']]}}</el-radio>
            </el-radio-group>
          </template>

          <!-- checkbox 类型 -->
          <template v-else-if="item.type === 'checkbox'">
            <el-checkbox
              v-model="form[item.key]"
              :disabled="item.disabled"
            ></el-checkbox>
          </template>

        </el-form-item>
      </template>
      <!-- {{form}} -->
    </el-form>

  </div>
</template>

<script>
export default {
  name: "pageForm",
  data() {
    return {
      form: {},
    };
  },
  props: {
    formConfig: {
      type: Array,
    },
  },
  watch: {
    formConfig: {
      deep: true,
      immediate: true,
      handler: function (v) {
        console.log(v);
        this.$formConfig = v;
        this.form = this._getFormData();
      },
    },
  },
  methods: {
    // 获取表单的数据结构
    _getFormData() {
      let ds = {};
      this.formConfig.forEach((item) => {
        ds[item.key] = item.value || "";
      });
      return ds;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>